<template>
    <mu-container>
        <mu-flex align-items="center" style="padding-bottom: 8px;">
            <span style="margin-right: 16px;">标签位置:</span>
            <mu-radio v-model="labelPosition" style="margin-right: 16px;" value="top" label="Top"></mu-radio>
            <mu-radio v-model="labelPosition" style="margin-right: 16px;" value="left" label="Left"></mu-radio>
            <mu-radio v-model="labelPosition" style="margin-right: 16px;" value="right" label="Right"></mu-radio>
        </mu-flex>
        <mu-form ref="form" :model="form" class="mu-demo-form" :label-position="labelPosition" label-width="100">
            <mu-form-item prop="input" label="Input">
                <mu-text-field v-model="form.input"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="select" label="Select">
                <mu-select v-model="form.select">
                    <mu-option v-for="option,index in options" :key="option" :label="option" :value="option"></mu-option>
                </mu-select>
            </mu-form-item>
            <mu-form-item prop="date" label="Date Time">
                <mu-date-input v-model="form.date" type="dateTime" actions></mu-date-input>
            </mu-form-item>
            <mu-form-item prop="radio" label="Radio">
                <mu-radio v-model="form.radio" value="male" label="Male"></mu-radio>
                <mu-radio v-model="form.radio" value="female" label="Female"></mu-radio>
            </mu-form-item>
            <mu-form-item prop="checkbox" label="Checkbox">
                <mu-checkbox v-model="form.checkbox" value="eat" label="Eat"></mu-checkbox>
                <mu-checkbox v-model="form.checkbox" value="sleep" label="Sleep"></mu-checkbox>
                <mu-checkbox v-model="form.checkbox" value="run" label="Run"></mu-checkbox>
                <mu-checkbox v-model="form.checkbox" value="movie" label="Movie"></mu-checkbox>
            </mu-form-item>
            <mu-form-item prop="switch" label="Switch">
                <mu-switch v-model="form.switch"></mu-switch>
            </mu-form-item>
            <mu-form-item prop="slider" label="Slider">
                <mu-slider v-model="form.slider"></mu-slider>
            </mu-form-item>
            <mu-form-item prop="textarea" label="Textarea">
                <mu-text-field multi-line :rows="3" :rows-max="6" v-model="form.textarea"></mu-text-field>
            </mu-form-item>

            <mu-form-item prop="username" label="用 户 名" :rules="usernameRules">
                <mu-text-field v-model="form.username"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="password" label="密 码" :rules="passwordRules">
                <mu-text-field v-model="form.password" type="password"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="repassword" label="重 复 密 码" :rules="repasswordRules">
                <mu-text-field v-model="form.repassword" type="password"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="age" label="年 龄" :rules="ageRules">
                <mu-text-field v-model="form.age"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="email" label="邮 箱" :rules="emailRules">
                <mu-text-field v-model="form.email"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="mobile" label="手 机 号" :rules="mobileRules">
                <mu-text-field v-model="form.mobile"></mu-text-field>
            </mu-form-item>
            <mu-form-item prop="sex" label="性别" :rules="sexRules">
                <mu-text-field v-model="form.sex"></mu-text-field>
            </mu-form-item>
            <mu-form-item>
                <mu-button color="primary" @click="submit">提交</mu-button>
                <mu-button @click="clear">重置</mu-button>
            </mu-form-item>
        </mu-form>
    </mu-container>
</template>
<script>
    import Rules from '@/components/Rules'
    export default {
        data () {
            return {
                options: [
                    'Option 1', 'Option 2', 'Option 3', 'Option 4',
                    'Option 5', 'Option 6', 'Option 7', 'Option 8',
                    'Option 9', 'Option 10'
                ],
                form: {
                    input: '',
                    select: '',
                    date: '',
                    radio: '',
                    checkbox: [],
                    switch: false,
                    slider: 30,
                    textarea: ''
                },
                labelPosition : 'right',
                validateForm: {
                    username: '',
                    password: '',
                    repassword: '',
                    isAgree: false
                },
                usernameRules: [
                    { validate: (val) => Rules.required(val), message: '请填写用户名'},
                    { validate: (val) => Rules.maxSize(val,5), message: '用户名长度不能大于5个字符'},
                    { validate: (val) => Rules.minSize(val,3), message: '用户名长度不能小于3个字符'},
                ],
                passwordRules: [
                    { validate: (val) => Rules.required(val), message: '必须填写密码'},
                    { validate: (val) => Rules.maxSize(val,10), message: '密码长度不能大于10位'},
                    { validate: (val) => Rules.minSize(val,3), message: '密码长度不能小于3位'},
                ],
                repasswordRules: [
                    { validate: (val) => Rules.required(val), message: '必须填写重复密码'},
                    { validate: (val) => Rules.maxSize(val,10), message: '密码长度不能大于10位'},
                    { validate: (val) => Rules.minSize(val,3), message: '密码长度不能小于3位'},
                    { validate: (val) => Rules.equals(val,this.form.password), message: '两次密码不一致'},
                ],
                ageRules: [
                    { validate: (val) => Rules.required(val), message: '请填写年龄'},
                    { validate: (val) => Rules.number(val), message: '年龄必须是数字'},
                ],
                emailRules: [
                    { validate: (val) => Rules.required(val), message: '请填写邮箱'},
                    { validate: (val) => Rules.email(val), message: '邮箱格式错误'},
                ],
                mobileRules: [
                    { validate: (val) => Rules.required(val), message: '请填写手机号'},
                    { validate: (val) => Rules.phone(val), message: '手机号格式错误'},
                ],
                sexRules: [
                    { validate: (val) => Rules.required(val), message: '请填写性别'},
                    { validate: (val) => this.checkSex(val), message: '请填写正确的性别'},
                ],
                argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议'}],

            }
        },
        methods: {
            submit () {
                this.$refs.form.validate().then((result) => {
                    console.log('form valid: ', result)
            });
            },
            clear () {
                this.$refs.form.clear();
                this.validateForm = {
                    username: '',
                    password: '',
                    isAgree: false
                };
            },
            checkSex (val) {
                var res = false;
                if (val == '男' || val == '女') {
                    res = true;
                }
                console.log('1:'+res);
                return res;
            }
        },
    };
</script>
<style>
    .mu-demo-form {
        width: 100%;
        max-width: 460px;
    }
</style>
